<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/webjars/element-ui/2.15.1/lib/theme-chalk/index.css">
    <style>

        body {
            font-family: "微软雅黑"
        }

        html, body, .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            /* padding-top: 0;*/
            /*外部间距也是如此设置*/
            margin: 0;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .header {
            display: flex;
            align-items: center;
            /*height: 80px;*/
            /*padding-bottom: 20px;*/
            border-bottom: 1px solid #eee;
        }

        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            /*text-align: center;*/
            /*color: #606266;*/
            /*height: 55px;*/
            /*padding-top: 20px;*/
            border-top: 1px solid #eee;
        }

        .el-table::before, .el-table__fixed-right::before, .el-table__fixed::before {
            height: 0;
        }

        .dialog-content {
            max-height: 350px;
            overflow-y: scroll
        }

        .plugin-btn {
            padding: 0;
        }

        .floating-button {
            position: fixed;
            bottom: 30px;
            right: -50px;
            width: 100px;
            height: 60px;
            /*background-color: #13ce66;*/
            /*border-radius: 50%;*/
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
            /*color: #fff;*/
            /*text-align: center;
            line-height: 50px;*/
            z-index: 9999;
            /*cursor: pointer;*/
        }

        .floating-button:hover {
            transform: translateX(-50px);
        }

        [v-cloak] {
            display: none;
        }

        .github-corner:hover .octo-arm {
            animation: octocat-wave 560ms ease-in-out
        }

        @keyframes octocat-wave {
            0%, 100% {
                transform: rotate(0)
            }
            20%, 60% {
                transform: rotate(-25deg)
            }
            40%, 80% {
                transform: rotate(10deg)
            }
        }

        @media (max-width: 500px) {
            .github-corner:hover .octo-arm {
                animation: none
            }

            .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }
        }

    </style>
</head>
<body>
<div id="concept-plugin-app">
    <!--:style="{top: buttonTop + 'px',left: buttonLeft + 'px'}"-->
    <el-button class="floating-button"
               @click="help.visible = true">
        <i class="el-icon-question el-icon--left" style="margin-right: 10px"></i>
        帮助
    </el-button>
    <el-dialog
            :visible.sync="help.visible"
            title="帮助">
        <div class="dialog-content" v-html="help.html">
        </div>
    </el-dialog>
    <el-container style="height: 100vh">
        <el-header v-if="setting.header.display" class="header">
            <h1>
                <!--#409EFF-->
                <!--#303133-->
                <!--#1989FA-->
                <!--font-weight: normal;font-size:35px;-->
                <span v-if="setting.header.title.display" style="color: #303133;" v-cloak>
                    {{setting.header.title.text}}
                </span>
            </h1>
        </el-header>
        <a v-if="setting.githubCorner.display" href="https://github.com/Linyuzai/concept" target="_blank"
           class="github-corner"
           aria-label="View source on GitHub">
            <svg width="80" height="80" viewBox="0 0 250 250"
                 style="fill:#303133; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
                 aria-hidden="true">
                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                      fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                      fill="currentColor" class="octo-body"></path>
            </svg>
        </a>
        <el-container>
            <el-aside>
                <el-container>
                    <el-header style="height: 80px;border-right: solid 1px #e6e6e6;">
                        <!--<el-input placeholder="搜索分组"
                                  v-model="group.search"
                                  clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>-->
                        <el-switch
                                style="margin-top: 30px"
                                @change="lock"
                                v-model="auth.switch"
                                active-text="锁定">
                        </el-switch>
                        <el-button-group style="margin-top: 20px; float: right">
                            <el-button v-if="!auth.lock" @click="openGroupDialog"
                                       icon="el-icon-plus"></el-button>
                            <el-button @click="refreshGroups" icon="el-icon-refresh"></el-button>
                            <!--<el-button @click="explain" icon="el-icon-warning-outline"></el-button>-->
                        </el-button-group>
                    </el-header>
                    <el-main style="padding: 0">
                        <el-menu style="height: 100%"
                                 :default-active="group.select"
                                 @select="selectGroup" v-cloak>
                            <el-menu-item :index="group.name"
                                          v-for="group in group.list">
                                <i v-if="group.state" class="el-icon-folder-checked"></i>
                                <i v-else class="el-icon-folder-delete"></i>
                                <span slot="title">{{group.name}}</span>
                            </el-menu-item>
                        </el-menu>
                    </el-main>
                </el-container>
                <el-dialog title="添加分组"
                           :close-on-click-modal="false"
                           :visible.sync="group.add.visible">
                    <el-form :model="group.add.form" :rules="group.add.rules"
                             @submit.native.prevent=""
                             ref="group.add.form">
                        <el-form-item label="分组名称" prop="name">
                            <!--<el-tooltip class="item" effect="dark" placement="right">
                                <div slot="content" v-cloak>
                                    与文件目录对应
                                </div>
                                <i class="el-icon-warning-outline" v-cloak></i>
                            </el-tooltip>-->
                            <el-input v-model="group.add.form.name"
                                      @keyup.enter.native="addGroup"
                                      name="name"
                                      autocomplete></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer" slot="footer">
                        <el-button @click="group.add.visible = false" v-cloak>取 消</el-button>
                        <el-button @click="addGroup" type="primary" v-cloak>添 加</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="解锁"
                           @close="auth.switch = auth.lock"
                           :close-on-click-modal="false"
                           :visible.sync="auth.unlock.visible">
                    <el-form :model="auth.unlock.form" :rules="auth.unlock.rules"
                             @submit.native.prevent=""
                             ref="auth.unlock.form">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="auth.unlock.form.password"
                                      @keyup.enter.native="unlock"
                                      name="password"
                                      show-password></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer" slot="footer">
                        <el-button @click="auth.lock = true;auth.unlock.visible = false;" v-cloak>取
                            消
                        </el-button>
                        <el-button @click="unlock" type="primary" v-cloak>解 锁</el-button>
                    </div>
                </el-dialog>
            </el-aside>
            <el-main style="height: 100%;padding-bottom: 0">
                <el-container style="height: 100%;">
                    <el-header style="padding: 0;text-align: left; font-size: 12px;" v-cloak>
                        <el-input placeholder="搜索插件"
                                  v-model="plugin.search"
                                  clearable
                                  style="width: 300px;float: left">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-button v-if="!auth.lock"
                                   type="primary"
                                   plain
                                   icon="el-icon-upload2"
                                   @click="openUploadDialog('')"
                                   style="width: 110px;margin-left: 20px">上传
                        </el-button>
                        <el-button type=""
                                   plain
                                   icon="el-icon-delete"
                                   @click="openDeletedPluginsDialog"
                                   style="width: 110px;margin-left: 10px;float: right">回收站
                        </el-button>
                        <el-dialog title="上传插件"
                                   width="420px"
                                   :close-on-click-modal="false"
                                   :visible.sync="plugin.upload.visible">
                            <el-upload action="/concept-plugin/management/plugin/upload"
                                       style="margin: 0 10px"
                                       :disabled="plugin.upload.disabled"
                                       :before-upload="beforeUpload"
                                       :on-change="uploadChange"
                                       :on-success="uploadSuccess"
                                       :on-error="uploadError"
                                       :data="{group: this.group.select, name: this.plugin.upload.name}"
                                       drag>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            </el-upload>
                        </el-dialog>
                        <el-dialog title="回收站"
                                   :visible.sync="plugin.deleted.visible">
                            <el-input placeholder="搜索插件"
                                      v-model="plugin.deleted.search"
                                      clearable>
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                            <el-table
                                    :data="plugin.deleted.list.filter(data => !plugin.deleted.search||data.plugin.toLowerCase().includes(plugin.deleted.search.toLowerCase()))"
                                    @selection-change=""
                                    style="width: 100%;border-bottom-width: 0"
                                    height="350px">
                                <el-table-column label="序号" type="index" fixed width="60">
                                    <template slot="header">序号
                                        <span class="caret-wrapper" style="width: 0"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="plugin" label="插件包" sortable fixed>
                                </el-table-column>
                                <el-table-column prop="size" label="插件大小" sortable>
                                </el-table-column>
                                <el-table-column prop="creationTime" label="上传时间" sortable>
                                </el-table-column>
                                <el-table-column label="操作" prop="url" fixed="right">
                                    <template slot="header">操作
                                        <span class="caret-wrapper" style="width: 0"></span>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button class="plugin-btn"
                                                   @click="downloadPlugin(scope.row.plugin, true)"
                                                   type="text">下载
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-dialog>
                    </el-header>
                    <el-main ref="tableMain" style="height:100%;padding: 0">
                        <el-table
                                :data="plugin.list.filter(data => !plugin.search||data.plugin.toLowerCase().includes(plugin.search.toLowerCase()) || data.name.toLowerCase().includes(plugin.search.toLowerCase()))"
                                @selection-change=""
                                style="width: 100%;border-bottom-width: 0"
                                height="100%">
                            <!--<el-table-column type="selection" fixed width="25">
                            </el-table-column>-->
                            <!--align="center"-->
                            <el-table-column label="序号" type="index" fixed width="60">
                                <template slot="header">序号
                                    <span class="caret-wrapper" style="width: 0"></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="plugin" label="插件包" sortable fixed>
                            </el-table-column>
                            <!--<el-table-column prop="name" label="插件名称" sortable width="150">
                            </el-table-column>-->
                            <el-table-column prop="size" label="插件大小" sortable>
                            </el-table-column>
                            <el-table-column prop="creationTime" label="上传时间" sortable>
                            </el-table-column>
                            <el-table-column prop="state" label="插件状态" sortable fixed="right">
                                <template slot="header">插件状态</template>
                                <template slot-scope="scope">
                                    <el-tag :type="getStateType(scope.row.state)">
                                        <!--size="small"-->
                                        <i :class="getStateIcon(scope.row.state)"></i>
                                        {{ formatState(scope.row.state) }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" prop="url" fixed="right" width="280">
                                <template slot="header">操作
                                    <span class="caret-wrapper" style="width: 0"></span>
                                </template>
                                <template slot-scope="scope">
                                    <el-button v-if="showLoad(scope.row.state)"
                                               class="plugin-btn"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="loadPlugin(scope.row.plugin)"
                                               type="text">加载
                                    </el-button>
                                    <el-button v-if="showUnload(scope.row.state)"
                                               class="plugin-btn"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="unloadPlugin(scope.row.plugin)"
                                               type="text">卸载
                                    </el-button>
                                    <!--v-if="showProperties(scope.row.state)"-->
                                    <el-button class="plugin-btn"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="getProperties(scope.row.plugin)"
                                               type="text">查看配置
                                    </el-button>
                                    <!--<el-button v-if="showReload(scope.row.state)"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="reloadPlugin(scope.row.plugin)"
                                               type="text">重新加载
                                    </el-button>-->
                                    <el-button v-if="showUpdate(scope.row.state)"
                                               class="plugin-btn"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="openUpdateDialog(scope.row.plugin)"
                                               type="text">更新
                                    </el-button>
                                    <el-button v-if="showRename(scope.row.state)"
                                               class="plugin-btn"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="openRenameDialog(scope.row.plugin)"
                                               type="text">重命名
                                    </el-button>
                                    <el-button v-if="showDelete(scope.row.state)"
                                               class="plugin-btn"
                                               :disabled="isIngState(scope.row.state)"
                                               @click="deletePlugin(scope.row.plugin)"
                                               type="text">删除
                                    </el-button>
                                    <el-button :disabled="isIngState(scope.row.state)"
                                               class="plugin-btn"
                                               @click="downloadPlugin(scope.row.plugin, false)"
                                               type="text">下载
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-dialog title="插件配置"
                                   :visible.sync="plugin.property.visible">
                            <el-form v-cloak class="dialog-content">
                                <el-form-item v-for="property in plugin.property.list" :label="property.name">
                                    <el-input v-model="property.value" :name="property.name"
                                              disabled></el-input>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <el-dialog title="重命名"
                                   :close-on-click-modal="false"
                                   :visible.sync="plugin.rename.visible">
                            <el-form :model="plugin.rename.form" :rules="plugin.rename.rules"
                                     @submit.native.prevent=""
                                     ref="plugin.rename.form">
                                <el-form-item label="名称" prop="rename">
                                    <el-input v-model="plugin.rename.form.rename"
                                              @keyup.enter.native="renamePlugin"
                                              name="rename"
                                              autocomplete></el-input>
                                </el-form-item>
                            </el-form>
                            <div class="dialog-footer" slot="footer">
                                <el-button @click="plugin.rename.visible = false" v-cloak>取 消</el-button>
                                <el-button @click="renamePlugin"
                                           :disabled="plugin.rename.form.name === plugin.rename.form.rename"
                                           type="primary" v-cloak>确 定
                                </el-button>
                            </div>
                        </el-dialog>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
        <el-footer v-if="setting.footer.display"
                   class="footer"
                   v-cloak>
            <!--#606266-->
            <!--#303133-->
            <span style="color: #606266;">©2024 黑白法师</span>
        </el-footer>
    </el-container>
</div>
</body>
<script src="/webjars/vue/2.6.11/vue.min.js" type="text/javascript"></script>
<script src="/webjars/axios/1.7.2/dist/axios.min.js" type="text/javascript"></script>
<!--<script src="/webjars/vue-resource/1.5.1/dist/vue-resource.min.js" type="text/javascript"></script>-->
<script src="/webjars/element-ui/2.15.1/lib/index.js" type="text/javascript"></script>
<script src="/webjars/showdown/2.1.0/dist/showdown.min.js" type="text/javascript"></script>
<script src="/concept-plugin/concept-plugin.js" type="text/javascript"></script>
<script>
    const urlPrefix = '/concept-plugin/management/';
    const authPrefix = urlPrefix + 'auth/';
    const groupPrefix = urlPrefix + 'group/';
    const pluginPrefix = urlPrefix + 'plugin/';
    let uploadLoading = null;

    if (typeof init == 'function') {
        pwd = init();
    } else {
        console.log('init() not defined');
    }

    function formatParams(params) {
        let keys = Object.keys(params);
        let array = [];
        keys.forEach(key => {
            array.push(key + '=' + params[key]);
        });
        return array.join('&');
    }

    function getSettingUrl() {
        return getUrl(urlPrefix, 'setting');
    }

    function getAuthUrl(path, params) {
        return getUrl(authPrefix, path, params);
    }

    function getGroupUrl(path, params) {
        return getUrl(groupPrefix, path, params);
    }

    function getPluginUrl(path, params) {
        return getUrl(pluginPrefix, path, params);
    }

    function getUrl(prefix, path, params) {
        if (params === undefined) {
            return prefix + path;
        } else {
            return prefix + path + '?' + formatParams(params);
        }
    }

    function httpGet(url, success, error) {
        http(axios.get(url), success, error);
    }

    function httpPost(url, params, success, error) {
        http(axios.post(url, params, {headers: {"Content-Type": "application/x-www-form-urlencoded"}}), success, error);
    }

    function http(promise, success, error) {
        promise.then(response => {
            //console.log(response);
            if (success) {
                success(response.data);
            }
        }).catch(e => {
            if (error) {
                error(e);
            }
            console.log(e);
        });
    }

    const validateName = (rule, value, callback) => {
        if (value.indexOf('/') !== -1) {
            callback(new Error('名称不能包含\'/\''));
        } else {
            callback();
        }
    };

    const validateRename = (rule, value, callback) => {
        if (app.group.select === '') {
            callback();
            return;
        }
        let params = {group: app.group.select, name: value};
        httpGet(getPluginUrl('exist', params), response => {
            let body = response;
            if (body.success) {
                if (body.data) {
                    callback(new Error('名称已存在'));
                } else {
                    callback();
                }
            } else {
                callback(new Error(body.message));
                console.log(response);
            }
        }, () => {
            callback(new Error('服务异常'));
        });
    };
    let app = new Vue({
        el: "#concept-plugin-app",
        data: {
            setting: {
                header: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Concept Plugin'
                    },
                    githubCorner: {
                        display: true
                    }
                },
                footer: {
                    display: true
                }
                /*script: {
                    list: ['/concept-plugin/concept-plugin.js']
                }*/
            },
            auth: {
                switch: true,
                lock: true,
                unlock: {
                    visible: false,
                    rules: {
                        password: []
                    },
                    form: {
                        password: ''
                    }
                }
            },
            help: {
                visible: false,
                html: ""
            },
            group: {
                select: '',
                badge: true,
                list: [],
                add: {
                    visible: false,
                    rules: {
                        name: [
                            {required: true, message: '分组名称不能为空', trigger: 'blur'},
                            {validator: validateName, trigger: 'blur'}
                        ]
                    },
                    form: {
                        name: ''
                    }
                }
            },
            plugin: {
                refresh: 0,
                search: '',
                list: [],
                property: {
                    visible: false,
                    list: []
                },
                upload: {
                    visible: false,
                    disabled: false,
                    name: ''
                },
                rename: {
                    visible: false,
                    rules: {
                        rename: [
                            {required: true, message: '名称不能为空', trigger: 'blur'},
                            {validator: validateName, trigger: 'blur'},
                            {validator: validateRename, trigger: 'blur'}
                        ]
                    },
                    form: {
                        name: '',
                        rename: ''
                    }
                },
                deleted: {
                    visible: false,
                    search: '',
                    list: []
                }
            }
        },
        methods: {
            initSettings() {
                this._get(getSettingUrl(), response => {
                    let body = response;
                    if (body.success) {
                        this.setting = body.data;
                        document.title = this.setting.header.title.text;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: body.message,
                            type: 'error'
                        });
                        console.log(response);
                    }
                });
                /*this.setting.script.list.forEach(script => {
                    import(script);
                });*/
            },
            initHelp() {
                this._get('/concept-plugin/help.md', response => {
                    let body = response;
                    this.help.html = new showdown.Converter().makeHtml(body);
                });
            },

            lock(lock) {
                if (lock) {
                    this.auth.lock = true;
                } else {
                    this.openUnlockDialog();
                }
            },
            openUnlockDialog() {
                let form = this.$refs['auth.unlock.form'];
                if (form !== undefined) {
                    form.resetFields();
                }
                this.auth.unlock.visible = true;
            },
            unlock() {
                let pwd = this.auth.unlock.form.password;
                if (typeof encodePassword == 'function') {
                    pwd = encodePassword(pwd);
                } else {
                    console.log('encodePassword(pwd) not defined');
                    pwd = btoa(pwd);
                }
                let params = {password: pwd};
                this._post(getAuthUrl('unlock'), params, (response) => {
                    let body = response;
                    if (body.success) {
                        if (body.data) {
                            this.auth.unlock.visible = false;
                            this.auth.lock = false;
                        } else {
                            this.auth.lock = true;
                            this.$notify({
                                title: '失败',
                                message: '密码错误',
                                type: 'error'
                            });
                        }
                    } else {
                        this.auth.lock = true;
                        this.$notify({
                            title: '失败',
                            message: '解锁异常',
                            type: 'error'
                        });
                        console.log(response);
                    }
                }, () => {
                    this.auth.lock = true;
                });
            },
            selectGroup(index) {
                this.group.select = index;
                this.refreshPlugins();
            },
            refreshGroups() {
                this._get(getGroupUrl('list'), (response) => {
                    let body = response;
                    if (body.success) {
                        this.group.list = body.data;
                        if (this.group.list.length > 0) {
                            if (this.group.select === '') {
                                this.group.select = this.group.list[0].name;
                            }
                        } else {
                            this.group.select = '';
                        }
                        this.refreshPlugins();
                    } else {
                        this.group.list = [];
                        this.group.select = '';
                        console.log(response);
                    }
                });
            },
            openGroupDialog() {
                let form = this.$refs['group.add.form'];
                if (form !== undefined) {
                    form.resetFields();
                }
                this.group.add.visible = true;
            },
            addGroup() {
                this.$refs['group.add.form'].validate((valid) => {
                    if (valid) {
                        let params = {group: this.group.add.form.name};
                        this._post(getGroupUrl('add'), params, (response) => {
                            let body = response;
                            if (body.success) {
                                this.group.add.visible = false;
                                this.refreshGroups();
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: body.message,
                                    type: 'error'
                                });
                                console.log(response);
                            }
                        });
                    }
                    return valid;
                });
            },
            openUploadDialog(name) {
                if (uploadLoading != null) {
                    uploadLoading.close();
                    uploadLoading = null;
                }
                this.plugin.upload.name = name;
                this.plugin.upload.disabled = false;
                this.plugin.upload.visible = true;
            },
            beforeUpload() {
                if (uploadLoading != null) {
                    uploadLoading.close();
                }
                uploadLoading = this.$loading({
                    target: '.el-upload-dragger'
                });
            },
            uploadChange() {
            },
            uploadSuccess() {
                this.plugin.upload.visible = false;
                this.refreshPlugins();
            },
            uploadError(err) {
                this.$notify.error({
                    title: '插件上传',
                    message: '上传失败',
                    position: 'bottom-right'
                });
                console.log(err);
            },
            openDeletedPluginsDialog() {
                let params = {group: this.group.select, deleted: true};
                this._get(getPluginUrl('list', params), (response) => {
                    let body = response;
                    if (body.success) {
                        this.plugin.deleted.list = body.data;
                    } else {
                        this.plugin.deleted.list = [];
                        console.log(response);
                    }
                    this.plugin.deleted.visible = true;
                }, () => {
                    this.plugin.deleted.visible = true;
                });
            },
            refreshPlugins() {
                this.plugin.refresh++;
                this.refreshPlugins0();
            },
            refreshPlugins0() {
                let params = {group: this.group.select, deleted: false};
                this._get(getPluginUrl('list', params), (response) => {
                    this.plugin.refresh--;
                    let body = response;
                    if (body.success) {
                        this.plugin.list = body.data;

                        let array = this.plugin.list;
                        let refresh = false;
                        for (let i = 0; i < array.length; i++) {
                            let state = array[i].state;
                            if (this.isIngState(state)) {
                                refresh = true;
                                break;
                            }
                        }
                        if (refresh) {
                            if (this.plugin.refresh <= 0) {
                                this.plugin.refresh = 1;
                                setTimeout(this.refreshPlugins0, 1000);
                            }
                        }
                    } else {
                        this.plugin.list = [];
                        console.log(response);
                    }
                }, () => {
                    this.plugin.refresh--;
                });
            },
            loadPlugin(name) {
                let params = {group: this.group.select, name: name};
                this._plugin(getPluginUrl('load'), params);
            },
            unloadPlugin(name) {
                let params = {group: this.group.select, name: name};
                this._plugin(getPluginUrl('unload'), params);
            },
            reloadPlugin(name) {
                let params = {group: this.group.select, name: name};
                this._plugin(getPluginUrl('reload'), params);
            },
            openUpdateDialog(name) {
                this.openUploadDialog(name);
            },
            getProperties(name) {
                let params = {group: this.group.select, name: name};
                this._get(getPluginUrl('properties', params), response => {
                    let body = response;
                    if (body.success) {
                        this.plugin.property.list = body.data;
                        this.plugin.property.visible = true;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: body.message,
                            type: 'error'
                        });
                        console.log(response);
                    }
                })
            },
            openRenameDialog(name) {
                let form = this.$refs['plugin.rename.form'];
                if (form !== undefined) {
                    form.resetFields();
                }
                this.plugin.rename.form.name = name;
                this.plugin.rename.form.rename = name;
                this.plugin.rename.visible = true;
            },
            renamePlugin() {
                this.$refs['plugin.rename.form'].validate((valid) => {
                    if (valid) {
                        let name = this.plugin.rename.form.name;
                        let rename = this.plugin.rename.form.rename;
                        let params = {group: this.group.select, name: name, rename: rename};
                        this._plugin(getPluginUrl('rename'), params, () =>
                            this.plugin.rename.visible = false);
                    }
                    return valid;
                });
            },
            deletePlugin(name) {
                let params = {group: this.group.select, name: name};
                this._plugin(getPluginUrl('delete'), params);
            },
            downloadPlugin(name, deleted) {
                let params = {group: this.group.select, name: name, deleted: deleted};
                const link = document.createElement('a');
                link.href = getPluginUrl('download', params);
                link.download = name;
                link.click();
            },
            showLoad(state) {
                return this.isUnloadState(state) && !this.auth.lock;
            },
            showUnload(state) {
                return this.isLoadState(state) && !this.auth.lock;
            },
            showReload(state) {
                return this.isLoadState(state) && !this.auth.lock;
            },
            showUpdate(state) {
                return this.isLoadState(state) && !this.auth.lock;
            },
            showProperties(state) {
                return this.isLoadState(state);
            },
            showRename(state) {
                return this.isUnloadState(state) && !this.auth.lock;
            },
            showDelete(state) {
                return this.isUnloadState(state) && !this.auth.lock;
            },
            isLoadState(state) {
                return 'LOADED' === state || 'UNLOADING' === state || 'UNLOAD_ERROR' === state || 'UPDATING' === state;
            },
            isUnloadState(state) {
                return 'UNLOADED' === state || 'LOADING' === state || 'LOAD_ERROR' === state;
            },
            isIngState(state) {
                return 'LOADING' === state || 'UNLOADING' === state || 'UPDATING' === state;
            },
            isErrorState(state) {
                return 'LOAD_ERROR' === state || 'UNLOAD_ERROR' === state;
            },
            getStateIcon(state) {
                switch (state) {
                    case 'LOADED':
                        return 'el-icon-circle-check';
                    case 'UNLOADED':
                        return 'el-icon-remove-outline';
                    case 'LOADING':
                    case 'UNLOADING':
                    case 'UPDATING':
                        return 'el-icon-loading';
                    case 'LOAD_ERROR':
                    case 'UNLOAD_ERROR':
                        return 'el-icon-circle-close';
                    default:
                        return 'el-icon-warning-outline';
                }
            },
            getStateType(state) {
                switch (state) {
                    case 'LOADED':
                    case 'LOADING':
                    case 'UPDATING':
                        return 'primary';
                    case 'UNLOADED':
                    case 'UNLOADING':
                        return 'info';
                    case 'LOAD_ERROR':
                    case 'UNLOAD_ERROR':
                        return 'danger';
                    default:
                        return 'warning';
                }
            },
            formatState(state) {
                switch (state) {
                    case 'LOADED':
                        return '已加载';
                    case 'LOADING':
                        return '加载中';
                    case 'LOAD_ERROR':
                        return '加载失败';
                    case 'UNLOADED':
                        return '未加载';
                    case 'UNLOADING':
                        return '卸载中';
                    case 'UNLOAD_ERROR':
                        return '卸载失败';
                    case 'UPDATING':
                        return '更新中';
                    default:
                        return '未知';
                }
            },
            /*explain() {
                let content = '';
                this.$alert(content, '说明', {dangerouslyUseHTMLString: true});
            },*/
            _get(url, success, error) {
                httpGet(url, success, e => {
                    if (error) {
                        error(e);
                    }
                    this._error(e);
                })
            },
            _post(url, params, success, error) {
                httpPost(url, params, success, e => {
                    if (error) {
                        error(e);
                    }
                    this._error();
                })
            },
            _plugin(url, params, success) {
                this._post(url, params, response => {
                    let body = response;
                    if (body.success) {
                        if (success) {
                            success();
                        }
                        this.refreshPlugins();
                    } else {
                        this.$notify({
                            title: '失败',
                            message: body.message,
                            type: 'error'
                        });
                        console.log(response);
                    }
                })
            },
            _error() {
                this.$notify({
                    title: '失败',
                    message: '服务异常',
                    type: 'error'
                });
            }
        },
        mounted: function () {
            this.initSettings();
            this.initHelp();
            this.refreshGroups();
        }
    });
</script>
</html>